<template>
  <div class="coach-schedule-container">
    <!-- 页面标题和操作区 -->
    <div class="page-header">
      <h1>教练排班管理</h1>
      <div class="header-actions">
        <el-select v-model="selectedCoach" placeholder="选择教练" clearable style="width: 180px; margin-right: 16px;">
          <el-option
            v-for="coach in coaches"
            :key="coach.id"
            :label="coach.name"
            :value="coach.id"
          >
            <span>{{ coach.name }}</span>
            <span class="coach-type-tag">{{ getCoachTypeText(coach.type) }}</span>
          </el-option>
        </el-select>
        <el-button type="primary" @click="handleBatchSchedule">批量排班</el-button>
      </div>
    </div>

    <!-- 主内容区 -->
    <el-card class="main-content-card">
      <!-- 视图切换 -->
      <div class="view-switcher">
        <el-button-group>
          <el-button :type="viewType === 'day' ? 'primary' : ''" @click="viewType = 'day'">日视图</el-button>
          <el-button :type="viewType === 'week' ? 'primary' : ''" @click="viewType = 'week'">周视图</el-button>
          <el-button :type="viewType === 'month' ? 'primary' : ''" @click="viewType = 'month'">月视图</el-button>
        </el-button-group>
      </div>

      <!-- 日视图 -->
      <div v-if="viewType === 'day'" class="view-container day-view">
        <el-table :data="daySchedule" style="width: 100%" border>
          <el-table-column prop="time" label="时间段" width="120" />
          <el-table-column prop="student" label="预约学员" width="120" />
          <el-table-column prop="subject" label="培训科目" width="120" />
          <el-table-column prop="status" label="状态" width="100" />
        </el-table>
      </div>

      <!-- 周视图 -->
      <div v-else-if="viewType === 'week'" class="view-container week-view">
        <p>周视图内容</p>
      </div>

      <!-- 月视图 -->
      <div v-else class="view-container month-view">
        <p>月视图内容</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 视图类型
const viewType = ref('day')

// 选中的教练
const selectedCoach = ref('')

// 教练列表
const coaches = ref([
  { id: '1', name: '李教练', type: 'subject2' },
  { id: '2', name: '王教练', type: 'subject3' }
])

// 日程数据
const daySchedule = ref([
  { time: '08:00-10:00', student: '', subject: '', status: 'available' },
  { time: '10:00-12:00', student: '张三', subject: '科目二', status: 'scheduled' },
  { time: '14:00-16:00', student: '李四', subject: '科目二', status: 'in_progress' }
])

// 获取教练类型文本
const getCoachTypeText = (type) => {
  const typeMap = {
    'subject2': '科目二教练',
    'subject3': '科目三教练',
    'theory': '理论教练'
  }
  return typeMap[type] || type
}

// 批量排班
const handleBatchSchedule = () => {
  alert('批量排班功能')
}
</script>

<style scoped>
/* 全局样式 */
.coach-schedule-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 页面标题样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

/* 主内容区样式 */
.main-content-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

/* 视图切换样式 */
.view-switcher {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

/* 视图容器样式 */
.view-container {
  padding: 0 20px 20px;
}

/* 其他样式 */
.coach-type-tag {
  margin-left: 8px;
  font-size: 12px;
  color: #666;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}
</style>